<template>
	<view class="myCode">
		<!-- #ifdef H5 -->
		<image v-if="picture" :src="picture" @click="look(picture, [picture])" mode="aspectFit"></image>
		<!-- #endif -->
		<image src="/static/images/myCode-bg.png" class="myCode-bg" mode="aspectFill"></image>
		<l-painter css="width: 750rpx;  box-sizing: border-box;position: relative;z-index: 1;height:1000rpx" @fail="fail" @done="done" pathType="url" ref="poster" performance>
			<l-painter-image src="/static/images/myCode-bg.png" css="position: absolute;z-index: -1;object-fit: cover; object-position: 50% 50%; width: 750rpx; height: 100vh;" />
			<l-painter-view css="margin-top: 80rpx;text-align: center;box-sizing: border-box;">
				<l-painter-text css="font-size: 48rpx;font-weight: bold;color: #333333;" :text="`邀请好友加入${config.com_title}`"></l-painter-text>
				<l-painter-text css="margin: 36rpx 0;font-size: 30rpx;font-weight: 400;color: #333333;" :text="`自购得实惠，分享可创业`"></l-painter-text>
			</l-painter-view>
			<l-painter-view
				css="margin-left: 40rpx;text-align:center; margin-top: 20rpx; padding: 32rpx;padding-bottom:60rpx; box-sizing: border-box; background: #ffffff; border-radius: 10rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)"
			>
				<l-painter-image :src="config.com_logo" css="width: 152rpx;height: 146rpx;object-fit: cover; object-position: 50% 50%;margin-top:30rpx;" />
				<l-painter-text :text="`分享者ID：${userinfo.name}`" css="color: #3db39d;display: block;margin-top:30rpx;"></l-painter-text>

				<l-painter-view css="position: relative;width: 296rpx;height: 264rpx;margin: 45rpx auto 0;">
					<l-painter-image src="/static/images/0001.png" css="position: absolute;width: 36rpx;height: 36rpx;top: 0;letf: 0;" />
					<l-painter-image src="/static/images/0002.png" css="position: absolute;width: 36rpx;height: 36rpx;top: 0;right: 0;" />
					<l-painter-image src="/static/images/0003.png" css="position: absolute;width: 36rpx;height: 36rpx;bottom: 0;right: 0;" />
					<l-painter-image src="/static/images/0004.png" css="position: absolute;width: 36rpx;height: 36rpx;bottom: 0;letf: 0;" />

					<l-painter-image :src="qrCode" css="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 230rpx;height: 230rpx;background: #f5f5f5;" />
				</l-painter-view>
			</l-painter-view>
		</l-painter>
		<!-- <view class="container">
			<view class="title">
				<text>邀请好友加入{{ config.com_title }}</text>
				<text v-if="false">邀请好友购买商品，赚取相应奖励</text>
				<text>自购得实惠，分享可创业</text>
			</view>
			<view class="card">
				<image class="logo" :src="config.com_logo" mode="aspectFit"></image>
				<text style="color: #3db39d">分享者ID：{{ userinfo.name }}</text>
				<view class="qr_code-box">
					<image class="dot" src="@/static/images/0001.png" mode="aspectFit"></image>
					<image class="dot" src="@/static/images/0002.png" mode="aspectFit"></image>
					<image class="dot" src="@/static/images/0003.png" mode="aspectFit"></image>
					<image class="dot" src="@/static/images/0004.png" mode="aspectFit"></image>
					<image class="qr_code" :src="qrCode" mode=""></image>
					<view class="loading">
						<u-loading-icon :show="loading" color="#E54E4E" mode="circle" textSize="36"></u-loading-icon>
					</view>
				</view>
			</view>
			<button @click="save">保存图片</button>
		</view> -->
		<button class="btn" @click="savehb">保存图片到相册</button>
	</view>
</template>

<script>
import API from '@/common/api';
import { mapState } from 'vuex';
import { get_userInfo } from '@/common/common_fun.js';
export default {
	name: 'myCode',
	computed: {
		...mapState(['config'])
	},
	data() {
		return {
			loading: false,
			qrCode: '',
			picture: '',
			userinfo: {}
		};
	},
	onLoad() {
		this.init();
		uni.showLoading({
			title: '加载中',
			mask: true
		});
	},
	onShow() {
		get_userInfo((data) => {
			this.userinfo = data;
		});
	},
	methods: {
		fail(v) {
			console.log(v);
			uni.hideLoading();
		},
		done(v) {
			uni.hideLoading();
			console.log('绘制完成:');
		},
		savehb() {
			this.$refs.poster.canvasToTempFilePathSync({
				fileType: 'jpg',
				quality: 1,
				success: (res) => {
					this.picture = res.tempFilePath;
					this.saveImage();
				},
				fail(e) {
					console.log('???????????', e);
				}
			});
		},
		// 保存图征
		saveImage() {
			uni.saveImageToPhotosAlbum({
				filePath: this.picture,
				success(res) {
					uni.showToast({
						title: '已保存到相册',
						icon: 'success',
						duration: 2000
					});
				}
			});
		},
		async save() {
			uni.hideLoading();
			uni.downloadFile({
				url: this.qrCode,
				success(res) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success(res) {
							uni.showToast({
								title: '保存成功'
							});
						},
						fail(err) {
							uni.showToast({
								title: '保存失败'
							});
						}
					});
				},
				fail(err) {
					uni.showToast({
						title: '下载失败'
					});
				}
			});

			// uni.saveImageToPhotosAlbum({
			// 	filePath: this.qrCode,
			// 	success: () => {
			// 		uni.showToast({
			// 			title: '图片保存成功'
			// 		});
			// 	},
			// 	fail: (e) => {
			// 		console.log(e);
			// 	}
			// });

			// let temp_img = await this.get_temp_img(this.qrCode);
			// uni.getFileSystemManager().readFile({
			// 	filePath: temp_img, //选择图片返回的相对路径
			// 	encoding: 'base64', //编码格式
			// 	success: (res) => {
			// 		this.saveImageToPhotosAlbum(res.data);
			// 	}
			// });
		},
		init() {
			this.loading = true;
			this.$http.getJson('users_shareInfo', {}).then((res) => {
				this.loading = false;
				if (res.code == 1) {
					this.qrCode = res.data.code;
				} else {
					this.msg(res.message);
				}
			});
		},
		get_temp_img(url) {
			return new Promise((resolve, reject) => {
				uni.downloadFile({
					url,
					success: (res) => {
						if (res.statusCode === 200) {
							resolve(res.tempFilePath);
						}
					}
				});
			});
		},

		saveImageToPhotosAlbum(tempImg) {
			let base64 = tempImg.replace(/^data:image\/\w+;base64,/, ''); //去掉data:image/png;base64,
			let filePath = wx.env.USER_DATA_PATH + '/师傅Masterhuo.png';
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			uni.getFileSystemManager().writeFile({
				filePath: filePath, //创建一个临时文件名
				data: base64, //写入的文本或二进制数据
				encoding: 'base64', //写入当前文件的字符编码
				success: (res) => {
					uni.saveImageToPhotosAlbum({
						filePath: filePath,
						success: function (res2) {
							uni.hideLoading();
							uni.showToast({
								title: '保存成功，请从相册选择再分享',
								icon: 'none',
								duration: 5000
							});
						},
						fail: function (err) {
							uni.hideLoading();
							uni.showToast({
								title: '请打开保存相册权限，再点击保存相册分享',
								icon: 'none',
								duration: 1000,
								success: () => {
									setTimeout(() => {
										uni.openSetting();
									}, 1000);
								}
							});
						}
					});
				},
				fail: (err) => {
					uni.hideLoading();
					//console.log(err)
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.myCode {
	position: relative;
	z-index: 1;
	height: 100vh;
	// overflow: hidden;
	button {
		// .fix-c-x();
		// position: fixed;
		z-index: 99999;
		bottom: 100rpx;
		width: 670rpx;
		height: 80rpx;
		margin-top: 64rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.btnbox {
		padding-bottom: 100rpx;
		width: 100%;
	}
	.myCode-bg {
		position: absolute;
		z-index: -1;
		width: 100vw;
		height: 100vh;
	}
	.container {
		margin: 0 32rpx;
		.title {
			margin: 80rpx 0 0;
			text-align: center;
			text:nth-of-type(1) {
				font-size: 48rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			text:nth-of-type(2) {
				margin: 36rpx 0;
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.card {
			.flex-center-y();
			justify-content: space-between;
			position: relative;
			// height: 676rpx;
			padding: 66rpx 0 66rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text {
				margin: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			.logo {
				width: 152rpx;
				height: 146rpx;
			}
			.qr_code-box {
				position: relative;
				width: 296rpx;
				height: 264rpx;
				.loading {
					.fix-c();
				}
				.dot {
					position: absolute;
					width: 36rpx;
					height: 36rpx;
				}
				.dot:nth-of-type(1) {
					top: 0;
					letf: 0;
				}

				.dot:nth-of-type(2) {
					top: 0;
					right: 0;
				}

				.dot:nth-of-type(3) {
					bottom: 0;
					right: 0;
				}
				.dot:nth-of-type(4) {
					bottom: 0;
					letf: 0;
				}
				.qr_code {
					.fix-c();
					width: 230rpx;
					height: 230rpx;
					background: #f5f5f5;
				}
			}
		}
	}
}
</style>
